import React, {Component} from 'react';
import {connect} from 'dva';
import {routerRedux} from 'dva/router'

import {dataCalc} from './dataCalc'
import style from './home.less'
import {Tabtitle,NoData} from '../../../components'

import moment from 'moment';
import {Card,DatePicker,Select,Table,Pagination} from 'antd'
const { RangePicker } = DatePicker;


const ToolBar=({
  allowClear=false,
  noHovering=true,
  start='2015/01/01',
  end='2015/01/01',
  format='YYYY/MM/DD',
  dispatch,location,tag
  })=>{
  const onChange=(date, dateString)=> {
    dispatch({
      type:`${tag}/changeRouter`,
      payload:{
        pathname:location.pathname,
        query:{
          beginDate:dateString[0],
          endDate:dateString[1]
        }
      }
    })
  }
  return(
    <div className={style.toolbar}>
      <Card
        noHovering={noHovering}
        >
        <RangePicker
          defaultValue={[moment(start, format), moment(end,format)]}
          format={format}
          allowClear={allowClear}
          onChange={onChange}
          style={{width:220}}
        />
      </Card>
    </div>
  )
}

const Total=({
  data=[
    {
      name:"总计",
      value:0
    },
    {
      name:"成功",
      value:0
    },
    {
      name:"失败",
      value:0
    }
  ]
  })=>(
  <div className={style.total}>
    {
      data.map((item,i)=><dl key={i}>
        <dt>{item.name}：</dt>
        <dd>{item.value}</dd>
      </dl>)
    }
  </div>
)

import Charts1 from '../components/Charts1'
const General=({
  noHovering=true,
  title,
  count,
  charts
  })=>{
  return(
    <div className={style.general}>
      <Card
        title={title}
        bordered={false}
        noHovering={noHovering}
        extra={<Total {...count}/>}
        >
          <Charts1 {...charts} />
      </Card>
    </div>
  )
}

import Charts2 from '../components/Charts2'
const ExecuteRecords=({
  noHovering=true,
  title,
  charts
  })=>{
  return(
    <div className={style.executeRecords}>
      <Card
        title={title}
        bordered={false}
        noHovering={noHovering}
        >
          <Charts2 {...charts} />
      </Card>
    </div>
  )
}

import Charts3 from '../components/Charts3'
const FailRecords=({
  noHovering=true,
  title,
  charts
  })=>{
  return(
    <div className={style.failRecords}>
      <Card
        title={title}
        bordered={false}
        noHovering={noHovering}
        >
          <Charts3 {...charts} />
      </Card>
    </div>
  )
}

const Option = Select.Option
const FailDetails=({
  noHovering=true,
  title,
  select,
  data,
  page,
  beginDate,
  endDate,
  jobName,
  shardingItem,
  dispatch,location,tag
  })=>{
  const changeJobName=(v)=>{
		dispatch({
			type:`${tag}/changeRouter`,
			payload:{
				pathname:location.pathname,
				query:{
          beginDate,
          endDate,
          jobName:v.key||''
				}
			}
		})
	}
  const changePage=(a,b)=>{
		dispatch({
			type:`${tag}/changeRouter`,
			payload:{
				pathname:location.pathname,
				query:{
          beginDate,
          endDate,
          jobName,
					currentpage:a,
					pagesize:b
				}
			}
		})
	}

  return(
    <div className={style.failDetails}>
      <Card
        title={title}
        bordered={false}
        noHovering={noHovering}
        extra={
          <div>
            <label>任务名称：</label>
            <Select
              labelInValue
              defaultValue={{ key: select.value }}
              value={{ key: jobName }}
              style={{ width: 120,marginBottom:15 }}
              onChange={changeJobName}
              >
              {
                select.data.map((item,i)=><Option value={item.value} key={i}>{item.name}</Option>)
              }
            </Select>
          </div>
        }>
          <Table
    				columns={data.columns}
    				dataSource={data.data}
    				rowKey={data.key}
    				size="small"
    				bordered
    				pagination={false}
          />
    			<Pagination
    				showSizeChanger={true}
    				current={page.currentpage}
    				total={page.totalnum}
    				pageSize={page.pagesize}
    				showTotal={total => `共 ${total} 条记录`}
    				onChange={changePage}
    				onShowSizeChange={changePage}
    			/>
      </Card>
    </div>
  )
}

const Scheduling = ({dispatch,scheduling,location}) =>{
  const tag='scheduling'
  const dataConfig=dataCalc({
      ...scheduling,
      dispatch,location,tag
    })

  if(scheduling.jobList&&scheduling.jobList.length){
    const {
      toobarConfig,
      generalConfig,
      executeRecordsConfig,
      failRecordsConfig,
      detailsConfig
    }=dataConfig
    return (
      <div className={`equity ${style.scheduling}`}>
  			<Tabtitle value={'调度执行情况'}/>
  			<div className="content-inner">
          <ToolBar {...toobarConfig} />
          <General {...generalConfig} />
          <ExecuteRecords {...executeRecordsConfig} />
          <FailRecords {...failRecordsConfig} />
          <FailDetails {...detailsConfig} />
        </div>
      </div>
  	)
  }else{
    const {
      toobarConfig
    }=dataConfig
    return (
      <div className={`equity ${style.scheduling}`}>
        <Tabtitle value={'调度执行情况'}/>
        <div className="content-inner">
          <ToolBar {...toobarConfig} />
          <div className={style.none}>
            <Total />
          </div>
        </div>
      </div>
    )
  }

}

Scheduling.propTypes = {
};

export default connect(({scheduling}) => ({scheduling}))(Scheduling);
